<template>
  <div class="input-cont flex p-12">
    <i :class="['iconfont', 'mr-8', icon]"></i>
    <input
      type="text"
      :placeholder="placeholder"
      :value="modelValue"
      @input="handleInput"
    />
  </div>
</template>

<script setup lang="ts">
type InputProps = {
  icon?: string;
  placeholder?: string;
  modelValue: string;
};
//withDefaults设置props默认值
withDefaults(defineProps<InputProps>(), {
  icon: "icon-youxiang",
  placeholder: "请输入账号",
});
const emit = defineEmits<{
  (e: "update:modelValue", arg: string): void;
}>();
const handleInput = (e: Event) => {
  let v = (e.target as HTMLInputElement).value;
  emit("update:modelValue", v);
};
</script>

<style>
.input-cont {
  left: 0rem;
  top: 5.6rem;
  /* width: 65.4rem;
  height: 9.6rem; */
  opacity: 1;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 1);
  border: 0.2rem solid rgba(238, 238, 238, 1);
}
.input-cont input {
  outline: none;
  border: none;
}
</style>
